html,
body {
  margin: 0;
  padding: 0;
  word-break: break-all;
}
#app {
  width: 100vw;
  height: 100vh;
  background-color: #020308;
  overflow: hidden;
}
img {
  display: inline-block;
}
.containImg {
  width: 100%;
  height: 100%;
}
.grid {
  display: grid;
}

/* flex */
.flex {
  display: flex;
  justify-content: flex-start;
  &.col {
    flex-direction: column;
  }
  &.aic {
    align-items: center;
  }
  &.aid {
    align-items: flex-end;
  }
  &.fa {
    justify-content: space-around;
  }
  &.fb {
    justify-content: space-between;
  }
  &.fc {
    justify-content: center;
  }
  &.fd {
    justify-content: flex-end;
  }
  &.wrap {
    flex-wrap: wrap;
  }
  .grow {
    flex-grow: 1;
  }
}

.font {
  font-weight: 400;
  word-break: break-all;
  font-family: PingFangSC-Regular, PingFang SC;
  color: #000;
  font-size: 14px;
  // 线宽
  &.bold {
    font-weight: 600;
    font-family: PingFangSC-Semibold, PingFang SC;
  }
  &.medium {
    font-weight: 500;
    font-family: PingFangSC-Medium, PingFang SC;
  }
  // 字号
  &.f12 {
    font-size: 12px;
  }
  &.f14 {
    font-size: 14px;
  }
  &.f15 {
    font-size: 15px;
  }
  &.f16 {
    font-size: 16px;
  }
  &.f18 {
    font-size: 18px;
  }
  &.f20 {
    font-size: 20px;
  }
  &.f24 {
    font-size: 24px;
  }
  &.f34 {
    font-size: 34px;
  }
  &.c-f {
    color: #fff;
  }
  &.c-7c {
    color: #7ffafc;
  }
  &.c-f8 {
    color: #ffdf28;
  }
  &.c-4f {
    color: #488fff;
  }
  &.c-18 {
    color: #18c4e2;
  }
}

.itemBg {
	color: #fff;
	background: url(../image/1.png) no-repeat left top,
		url(../image/2.png) no-repeat right top,
		url(../image/3.png) no-repeat left bottom,
		url(../image/4.png) no-repeat right bottom, #0d1d4e;
	border: 1px solid #2871e4;
}

.area1 {
  grid-area: area1;
}
.area1 {
  grid-area: area1;
}
.area2 {
  grid-area: area2;
}
.area3 {
  grid-area: area3;
}
.area4 {
  grid-area: area4;
}
.area5 {
  grid-area: area5;
}
.area6 {
  grid-area: area6;
}
.area7 {
  grid-area: area7;
}
.area8 {
  grid-area: area8;
}
.area9 {
  grid-area: area9;
}
.area10 {
  grid-area: area10;
}

.area11 {
  grid-area: area11;
}

.area12 {
  grid-area: area12;
}

.area13 {
  grid-area: area13;
}

.area14 {
  grid-area: area14;
}

.area15 {
  grid-area: area15;
}

.area16 {
  grid-area: area16;
}

/*  */
.content {
	padding: 0 20px;
}
.areaTitle{
	height: 50px;
	line-height: 50px;
	text-align: center;
	font-size: 28px;
}
.content .text {
	opacity: 0.9;
}
.table-table {
  --el-table-border-color: rgba(0,0,0,0) !important;
  color: #fff!important;
  ::v-deep &.el-table::before {
    //去除底部白线
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0px;
    // 文字颜色
    color: #ffffff !important;
  }
  ::v-deep .el-table,
  ::v-deep .el-table__expanded-cell {
    background-color: transparent !important;
    border: 0;
  }

  /* 表格内背景颜色 */
  ::v-deep .el-table th,
  ::v-deep .el-table tr,
  ::v-deep .el-table td {
    background-color: transparent !important;
    border: 0; //去除表格
    font-size: 14px;
  }

  /*去除底边框 表格*/
  ::v-deep.el-table td.el-table__cell {
    border: 0;
    color: #fff !important;
  }

  /** 表头 */
  ::v-deep.el-table th.el-table__cell.is-leaf {
    border: 0;
    color: #fff !important;
    background: rgba(8, 29, 63, 0.5) !important;
  }

  ::v-deep .el-table::before {
    //去除底部白线
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0px;
    // 文字颜色
    color: #ffffff !important;
  }

  ::v-deep .el-table .table-row-deep {
    background: rgba(15, 36, 107, 0.5) !important;
  }
}